<template>
  <view class="batch-update">
    <view class="content">
  <!--    <view class="form-item">
        <view class="label">
          <text class="text-red">*</text>
          选择字段
        </view>
        <view class="value">
          <uni-data-select v-model="curColumnName" :localdata="range" @change="changeCol" :clear="false">
          </uni-data-select>
        </view>
      </view> -->
      <a-form-item form-type="add" @on-value-change="onValChange" @on-value-blur="onValBlur" :field="curColumn"
        pageType="add" :ref="'fitem'" v-if="curColumnName">
      </a-form-item>
    </view>
    <view class="bottom">
      <button class="button bg-f5 margin-right" @click="cancel">取消</button>
      <button class="button" @click="confirm">确认</button>
    </view>
  </view>
</template>

<script>
  
  /**
   * batch-update-state 批量修改上下架状态
   * @description 批量编辑组件,选择字段，显示对应字段类型编辑器，确认后进行批量编辑
   * @property {Array}			columns				可编辑字段信息
   * @event {Function} cancel 取消，关闭
   * @event {Function} confirm 确认 拿到要修改的字段和修改的值
   * @example  <batchUpdate :columns="srvCols"></batchUpdate>
   */
  export default {
    name: 'BatchUpdateState',
    props: {
      columns: {
        type: Array,
        default: () => {
          return []
        }
      },
    },
    computed: {
      colMap() {
        let res = {}
        if (Array.isArray(this.columns) && this.columns.length > 0) {
          res = this.columns.reduce((pre, cur) => {
            pre[cur.column] = cur;
            return pre
          }, {})
        }
        return res
      },
      range() {
        let res = []
        if (Array.isArray(this.columns) && this.columns.length > 0) {
          this.columns.forEach(item => {
            if (item.label && item.columns && !['images'].includes(item.type)) {
              res.push({
                text: item.label,
                value: item.columns
              })
            }
          })
        }
        return res
      },
      curColumn() {
        return this.colMap[this.curColumnName]
      }
    },
    data() {
      return {
        curColumnName: 'sale_state'
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },
      confirm() {
        this.$emit('confirm', {
          column: this.curColumn.column,
          value: this.curColumn.value
        })
      },
      onValChange(e) {
        console.log(e);
      },
      changeCol(e) {
        console.log(e);
      }
    },
  }
</script>

<style scoped lang="scss">
  .batch-update {
    width: 50vw;
    min-height: 30vw;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    .content {
      flex: 1;
    }

    .bottom {
      padding: 2rem;
      text-align: right;
    }

    .form-item {
      display: flex;
      padding: .5rem;
      align-items: center;

      .label {
        min-width: 18rem;
        display: flex;
        min-height: 3rem;
        padding: .5rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #333;
        font-weight: 700;
        font-size: 2.4rem;
        white-space: normal;
        align-items: center;
      }

      .value {
        flex: 1;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        color: #000;
        font-size: 2.4rem;
        border-radius: .5rem;
        min-height: 5rem;
        text-align: left;
        padding-right: 2rem;
        justify-content: flex-start;
      }

      ::v-deep .uni-select {
        border-radius: 1rem;
        min-height: 5rem;

        .uni-icons.uniui-clear {
          font-size: 2.4rem !important;
        }

        .uni-select__selector-item {
          font-size: 2.4rem;
          line-height: 5rem;
        }

        .uni-select__selector-scroll {
          max-height: 50rem;
        }

        .uni-select__input-box {
          font-size: 2.4rem;
        }
      }

    }
  }
</style>
